@charset "UTF-8";

body {background: rgb(245, 245, 245);}
body, ul, li, h1, h3 {margin: 0; padding: 0;}
li {list-style: none;}
a  {text-decoration: none;}
*  {box-sizing: border-box;}

.wrap {
    width:  295px;
    height: 430px;
    overflow: hidden;
    background: #fff;

    border-top: 1px solid rgb(229, 57, 53);
    transition: all .25s linear;

    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}

.wrap:hover {
    transform: translateY(-2px);
    box-shadow: 2px 2px 5px 2px #ccc;
}

/*标题*/
.wrap .title {
    width: inherit;
    height: 70px;

    text-align: center;
    font: normal normal 16px/70px '宋体';
    color: rgb(229, 57, 53);
}

/*详情*/
.wrap .detail-list {
    width: calc(4 * 295px);
    height: 360px;

    font-size: 0;

    position: absolute;
    top: 70px;
    left: 0;

}

.wrap .detail-list .list-item {
    width: 295px;
    height: inherit;

    display: inline-block;
    vertical-align: top;

    text-align: center;
    font-size: 16px;
}

.wrap .detail-list .list-item .title {
    font-size: 20px;
}
.wrap .detail-list .list-item .sub-title {
    margin: 10px auto;
}
.wrap .detail-list .list-item .des {
    display: block;
    font-size:   12px;
    line-height: 20px;
    color: #b0b0b0;
    white-space: pre-wrap;
}
.wrap .detail-list .list-item .price {
    display: block;
    margin: 30px auto;
}

/*原点*/
.wrap .idots-box {
    width: inherit;
    text-align: center;

    position: absolute;
    left: 0;
    bottom: 20px;
}
.wrap .idots-box .idot-item {
    width:  6px;
    height: 6px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    margin: 0 5px;
    background-color: #ccc;

    cursor: pointer;
}

.wrap .idots-box .active {
    width:  10px;
    height: 10px;
    background-color: #fff;
    border: 2px solid #ffa500;
}
/*按钮*/
.wrap .btn {
    display: inline-block;
    width:  20px;
    height: 40px;

    opacity: 0;
    transition: all .25s linear;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.wrap:hover .btn {
    opacity: 1;
}
.wrap .btn:hover {
    background-color: gray;
}

.wrap .prev {
    left: 0;
    background: lightgray url("../imgs/left.png") no-repeat center;

}
.wrap .next {
    right: 0;
    background: lightgray url("../imgs/right.png") no-repeat center;
}










